<script setup>

import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {get} from "../../util/request.js";
import {showToast} from "vant";

const router = useRouter()
const route = ref(useRoute())
const onClickLeft = () => {
  history.back()
}//导航栏返回上一个页面

const jvbaoxingxi=ref({
  beizhu:'',
  yuanying:[],
})

const report = ref({})

const onReportAdd = () => {
  report.value.userId=route.value.query.id
  report.value.info=""
  for (let i=0;i<jvbaoxingxi.value.yuanying.length;i++) {
    report.value.info=report.value.info + jvbaoxingxi.value.yuanying[i]
  }
  get('report/add',report.value).then(res => {
    if (res.code===0) {
      router.push({path: '/reportOK'})
    }else {
      showToast(res.data)
    }
  })
}



</script>

<template>
  <div style="width: 100vw;height: 100vh">
    <van-nav-bar
        title="举报"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        style="
        width: 100vw;
        "
    />

    <van-row style="margin-top: 15px">
      <van-col span="7">
        <van-image :src="route.query.avatar" radius="10" width="80px" height="80px"></van-image>
       </van-col>
      <van-col span="17">
        <div style="text-align: left ;height: 40px">{{ route.query.nickname }}</div>
        <div style="text-align: right; display: flex">
          <p style="border-radius: 3px;background-color: rgb(77,77,77);color: #ffffff;margin-left: 5px">已实名</p>
          <p style="border-radius: 3px;background-color: rgb(77,77,77);color: #ffffff;margin-left: 5px">非中介保证金</p>
          <p style="border-radius: 3px;background-color: rgb(77,77,77);color: #ffffff;margin-left: 5px">租房合同</p>
        </div>
      </van-col>
    </van-row>

    <van-cell :border="false" title="举报原因" title-style="text-align: left;"></van-cell>
    <van-cell>
      <van-checkbox-group v-model="jvbaoxingxi.yuanying">
        <van-checkbox name="中介" style="margin-bottom:10px; ">中介</van-checkbox>
        <van-checkbox name="虚假房源信息" style="margin-bottom:10px; ">虚假房源信息</van-checkbox>
        <van-checkbox name="可能的原因..." style="margin-bottom:10px; ">可能的原因...</van-checkbox>
        <van-checkbox name="其他" style="margin-bottom:10px; ">其他</van-checkbox>
      </van-checkbox-group>
    </van-cell>

    <van-row style="box-shadow: 0 0 5px rgba(0,0,0,0.1);margin-left: 10px;margin-right: 10px;margin-top: 10px; /* 10像素的黑色外发光效果，透明度为0.5 */">
      <van-field
          style="background-color: rgb(231,228,228);"
          v-model="jvbaoxingxi.beizhu"
          placeholder="备注"
          type="textarea"
          maxlength="100"
          autosize
      />
    </van-row>
    <p style="font-size: 10px;text-align: left;margin-left: 10px;margin-right: 10px;">注：提供更多证据更易平台的审查，出现任何问题可以联系官方客服820-820-8820</p>
    <van-button color="rgb(77,77,77)" @click="onReportAdd" style="position: absolute;bottom: 10px;width:auto;left: 10px;right: 10px" type="primary" block>确认提交</van-button>
  </div>
</template>

<style scoped>

</style>